<template>
    <div class="goods">
      <Layout :style="{padding: '0 24px 24px'}">
        <Breadcrumb :style="{margin: '24px 0'}">
          <BreadcrumbItem><a href="javascript:void(0)" @click="jump('/index')">首页</a></BreadcrumbItem>
          <BreadcrumbItem>财务管理</BreadcrumbItem>
          <BreadcrumbItem>仓库管理</BreadcrumbItem>
          <BreadcrumbItem>库存列表</BreadcrumbItem>
        </Breadcrumb>
        <Content id="tal" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
          <div class="f-header" ghost>
            <div class="f-header-search">
              <span>搜索条件：</span>
              <Input v-model="goodsName" placeholder="请输入货物名称..." style="width: 300px"></Input>
              <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
            </div>
            <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
            <Button @click="toRefresh"><Icon type="md-sync" />刷新</Button>
            <Button type="primary" @click="toDown"><Icon type="md-download" />导出</Button>
          </div>
          <div class="f-content" style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
            <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
              <Table :columns="tb_columns" :height="666"  :data="goods_list" size="small"  ref="table"></Table>
              <Page :total="goods_total" :current="goods_current_page" :page-size="goods_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
            </div>
          </div>
        </Content>
      </Layout>
      <Drawer title="新增货物" :closable="false" v-model="addDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="货物名称：" prop="goodsName">
            <Input v-model="addForm.goodsName" placeholder="请输入货物名称..."></Input>
          </FormItem>
          <FormItem label="材质：" prop="material">
            <Input v-model="addForm.material" placeholder="请输入材质..."></Input>
          </FormItem>
          <FormItem label="规格：" prop="specification">
            <Input v-model="addForm.specification" placeholder="请输入规格..."></Input>
          </FormItem>
          <FormItem label="供应商：" prop="supplier">
            <Input v-model="addForm.supplier" placeholder="请输入供应商..."></Input>
          </FormItem>
          <FormItem label="货物类型：" prop="goodsType">
            <Select v-model="addForm.goodsType" placeholder="请选择货物类型...">
              <Option value="原材料">原材料</Option>
              <Option value="半成品">半成品</Option>
              <Option value="成品">成品</Option>
            </Select>
          </FormItem>
          <FormItem label="数量：" prop="number">
            <Input v-model="addForm.number" placeholder="请输入数量..."></Input>
          </FormItem>
          <FormItem label="单价：" prop="price">
            <Input v-model="addForm.price" placeholder="请输入单价..."></Input>
          </FormItem>
          <FormItem label="摘要：" prop="summary">
            <Input type="textarea" :rows="8" v-model="addForm.summary" placeholder="请输入摘要..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
      <Drawer title="修改货物" :closable="false" v-model="updateDrawer" width="30" :mask-closable="false">
        <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="120">
          <FormItem label="货物名称：" prop="goodsName">
            <Input v-model="addForm.goodsName" placeholder="请输入货物名称..."></Input>
          </FormItem>
          <FormItem label="材质：" prop="material">
            <Input v-model="addForm.material" placeholder="请输入材质..."></Input>
          </FormItem>
          <FormItem label="规格：" prop="specification">
            <Input v-model="addForm.specification" placeholder="请输入规格..."></Input>
          </FormItem>
          <FormItem label="供应商：" prop="supplier">
            <Input v-model="addForm.supplier" placeholder="请输入供应商..."></Input>
          </FormItem>
          <FormItem label="货物类型：" prop="goodsType">
            <Select v-model="addForm.goodsType" placeholder="请选择货物类型...">
              <Option value="原材料">原材料</Option>
              <Option value="半成品">半成品</Option>
              <Option value="成品">成品</Option>
            </Select>
          </FormItem>
          <FormItem label="数量：" prop="number">
            <Input v-model="addForm.number" placeholder="请输入数量..."></Input>
          </FormItem>
          <FormItem label="单价：" prop="price">
            <Input v-model="addForm.price" placeholder="请输入单价..."></Input>
          </FormItem>
          <FormItem label="摘要：" prop="summary">
            <Input type="textarea" :rows="8" v-model="addForm.summary" placeholder="请输入摘要..."></Input>
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button type="primary" @click="handleSubmit2('addForm')">提交</Button>
          <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
        </div>
      </Drawer>
    </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import {toGet,toPost} from "../../utils/MyAxios";
    export default {
        name: "goods",
        data() {
            return {
              goodsName:'',
              loading:false,
              addForm:{},
              addDrawer:false,
              updateDrawer:false,
              addRuleVal:{
                goodsName: [
                  { required: true, message: '请输入货物名称', trigger: 'blur' }
                ],
                material: [
                  { required: true, message: '请输入材质', trigger: 'blur' }
                ],
                specification: [
                  { required: true, message: '请输入规格', trigger: 'blur' }
                ],
                supplier: [
                  { required: true, message: '请输入供应商', trigger: 'blur' }
                ],
                goodsType: [
                  { required: true, message: '请选择货物类型', trigger: 'blur' }
                ],
                number: [
                  { required: true, message: '请输入数量', trigger: 'blur' }
                ],
                price: [
                  { required: true, message: '请输入单价', trigger: 'blur' }
                ],
                summary: [
                  { required: true, message: '请输入摘要', trigger: 'blur' }
                ],
              },
              tb_columns: [
                {
                  title: '货物名称',
                  key: 'goodsName',
                  align: 'center'
                },
                {
                  title: '材质',
                  key: 'material',
                  align: 'center'
                },
                {
                  title: '规格',
                  key: 'specification',
                  align: 'center'
                },
                {
                  title: '供应商',
                  key: 'supplier',
                  align: 'center'
                },
                {
                  title: '货物类型',
                  key: 'goodsType',
                  align: 'center'
                },
                {
                  title: '数量',
                  key: 'number',
                  align: 'center'
                },
                {
                  title: '单价',
                  key: 'price',
                  align: 'center'
                },
                {
                  title: '摘要',
                  key: 'summary',
                  align: 'center'
                },
                {
                  title: '操作',
                  align: 'center',
                  render: (h, params) => {
                      return h('div', [
                        h('Button', {
                          props: {
                            icon: 'md-create',
                            size: 'small'
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.toUpdate(params.row.id)
                            }
                          }
                        }),
                        h('Button', {
                          props: {
                            icon: 'md-trash',
                            size: 'small'
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.toDel(params.row.id)
                            }
                          }
                        })
                      ]);
                  }
                }
              ],
            }
        },
      computed: {
        ...mapGetters(['goods_list','goods_total','goods_current_page','goods_page_size']),
      },
      methods: {
        ...mapActions(['getGoodsList']),
        handleSubmit (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
                this.loading=true;
                let params = {
                  goodsName:this.addForm.goodsName,
                  material:this.addForm.material,
                  specification:this.addForm.specification,
                  supplier:this.addForm.supplier,
                  goodsType:this.addForm.goodsType,
                  number:this.addForm.number,
                  price:this.addForm.price,
                  summary:this.addForm.summary,
                };
                toPost('/finance-management/finance/goods/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '新增货物成功'
                      });
                      this.$refs[name].resetFields();
                      this.toRefresh();
                      this.addDrawer=false;
                    }else{
                      this.$Notice.error({
                        title: '新增货物失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  });
                this.loading=false;
            }
          })
        },
        handleSubmit2 (name) {
          this.$refs[name].validate((valid) => {
            if (valid) {
              this.loading=true;
              let params = {
                id:this.addForm.id,
                goodsName:this.addForm.goodsName,
                material:this.addForm.material,
                specification:this.addForm.specification,
                supplier:this.addForm.supplier,
                goodsType:this.addForm.goodsType,
                number:this.addForm.number,
                price:this.addForm.price,
                summary:this.addForm.summary,
              };
              toPost('/finance-management/finance/goods/update',params)
                .then(res=>{
                  if (res.resultCode === 0) {
                    this.$Notice.success({
                      title: '修改成功'
                    });
                    this.$refs[name].resetFields();
                    this.toRefresh();
                    this.updateDrawer=false;
                  }else{
                    this.$Notice.error({
                      title: '修改失败',
                      desc: '服务器发生未知错误'
                    })
                  }
                });
              this.loading=false;
            }
          })
        },
        handleReset (name) {
          this.addDrawer=false;
          this.updateDrawer=false;
          this.$refs[name].resetFields();
        },
        toDown(){
          swal({
            title: "您确认导出库存表数据吗？",
            icon: "info",
            buttons: ["取消", "确认下载"],
          })
            .then((willDown) => {
              if (willDown) {
                if(this.goods_list.length>0){
                  this.$refs.table.exportCsv({
                    filename: '库存表('+this.formatDate(new Date().toDateString())+')'
                  });
                }else{
                  swal("无法导出!", "表格暂无数据!", "error");
                }
              }
            });
        },
        onChange(currentPage){
          this.getGoodsList({
            'goodsName':this.goodsName,
            'currentPage':currentPage*1,
            'pageSize':this.goods_page_size
          });
        },
        toRefresh(){
          this.getGoodsList({
            'goodsName':this.goodsName,
            'currentPage':this.goods_current_page,
            'pageSize':this.goods_page_size
          });
        },
        jump(e){
          this.$router.push(e);
        },
        toUpdate(id){
          toGet('/finance-management/finance/goods/queryOne/'+id)
            .then(res=>{
              if (res.resultCode === 0) {
                this.addForm=res.data;
                this.updateDrawer=true;
              }else{
                this.$Notice.warning({
                  title: '获取信息失败',
                  desc: '服务器发生未知错误'
                });
              }
            });
        },
        toDel(id){
          swal({
            title: "您确定删除该货物吗?",
            text: "删除该货物后，系统将删除该货物的所有信息!",
            icon: "warning",
            buttons: ["容我再想想!", "确认删除!"],
            dangerMode: true,
          })
            .then((willDelete) => {
              if (willDelete) {
                toGet('/finance-management/finance/goods/delete/'+id)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      swal("删除成功!", {
                        icon: "success",
                      });
                      this.toRefresh();
                    }
                  })
                  .catch(error=>{
                    swal("删除失败!", {
                      icon: "error",
                    });
                  });
              }
            });
        },
        onPageSizeChange(pageSize){
          this.getGoodsList({
            'goodsName':this.goodsName,
            'currentPage':this.goods_current_page,
            'pageSize':pageSize*1
          });
        },
        toSearch(){
          this.getGoodsList({
            'goodsName':this.goodsName,
            'currentPage':this.goods_current_page,
            'pageSize':this.goods_page_size
          });
        },
        formatDate(date){
          if(date){
            let time = new Date(date);
            return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
          }else{
            return '';
          }
        }
      },
      mounted() {
        this.getGoodsList({
          'goodsName':this.goodsName,
          'currentPage':1,
          'pageSize':10
        });
      },
    }
</script>

<style lang="css" scoped>

</style>
